<div class="layuimini-container layuimini-page-anim">
    <div class="layuimini-main">

        <fieldset class="table-search-fieldset">
            <legend>搜索信息</legend>
            <div style="margin: 10px 10px 10px 10px">
                <form class="layui-form layui-form-pane" action="">
                    <div class="layui-form-item">
                        <div class="layui-inline">
                            <label class="layui-form-label">名称</label>
                            <div class="layui-input-inline">
                                <input type="text" name="name" autocomplete="off" class="layui-input">
                            </div>
                        </div>


                        <div class="layui-inline">
                            <button type="submit" class="layui-btn layui-btn-primary"  lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i> 搜 索</button>
                        </div>
                    </div>
                </form>
            </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
            <div class="layui-btn-container">
                <button class="layui-btn layui-btn-radius layui-btn-sm data-add-btn" lay-event="add"> 添加 </button>
                <button class="layui-btn  layui-btn-radiuss layui-btn-sm data-add-btn" lay-event="update"> 修改 </button>

                <button class="layui-btn layui-btn-sm layui-btn-radiusss data-delete-btn" lay-event="delete"> 删除 </button>

            </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>


    </div>
</div>

<script>
    layui.use(['form', 'table','miniPage','element','axios'], function () {
        let $ = layui.jquery,
            form = layui.form,
            table = layui.table,
            axios = layui.axios,
            miniPage = layui.miniPage;

        table.render({
            elem: '#currentTableId',
            method:'post',
            url: 'grade/query',
            toolbar: '#toolbarDemo',
            defaultToolbar: ['filter', 'exports', 'print', ],
            cols: [[
                {type: "checkbox", width: 50},
                {field: 'id', width: 80, title: 'ID', sort: true},
                {field: 'name', title: '名称'}

            ]],
            page: true,
            skin: 'line'
        });

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
            let result = JSON.stringify(data.field);
            //执行搜索重载
            table.reload('currentTableId', {
                where:data.field
            }, 'data');

            return false;
        });

        /**
         * toolbar事件监听
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
            if (obj.event === 'add') {   // 监听添加操作
                let content = miniPage.getHrefContent('grade/add.html');
                let openWH = miniPage.getOpenWidthHeight();

                let index = layer.open({
                    title: '添加用户',
                    type: 1,
                    shade: 0.2,
                    maxmin:true,
                    shadeClose: true,
                    area: [openWH[0] + 'px', openWH[1] + 'px'],
                    offset: [openWH[2] + 'px', openWH[3] + 'px'],
                    content: content,
                });
                $(window).on("resize", function () {
                    layer.full(index);
                });
            } else if (obj.event === 'update') {  // 监听修改操作
                let data = table.checkStatus('currentTableId').data;
                   if(data.length!=1){
                       miniAdmin.error("请选择一条数据");
                   }else {
                       let content = miniPage.getHrefContent('grade/update.html');
                       let openWH = miniPage.getOpenWidthHeight();

                       let index = layer.open({
                           title: '添加用户',
                           type: 1,
                           shade: 0.2,
                           maxmin:true,
                           shadeClose: true,
                           area: [openWH[0] + 'px', openWH[1] + 'px'],
                           offset: [openWH[2] + 'px', openWH[3] + 'px'],
                           content: content,
                       });
                       form.val("updateForm",{
                           id:data[0].id,
                           userName:data[0].userName,

                       });
                       setForm(data[0])
                       $(window).on("resize", function () {
                           layer.full(index);
                       });
                   }

            } else if(obj.event ==='delete'){      //监听删除操作
                let data = table.checkStatus('currentTableId').data;
                if(data.length==0){
                    layer.msg("请选择数据");
                }else {
                    layer.confirm("是否删除？",function (index){
                        //异步删除
                        let arr = data.map(item=>item.id);
                        axios.get('grade/delete?ids='+arr.join(","))
                            .then(function (response){
                            table.reload('currentTableId');
                            layer.msg(response.msg);
                        }).catch(function (error){
                            layer.msg("error");
                        })
                        layer.close(index);
                    });
                }
            }
        });

        function setForm(data){
            form.val("updateForm",{
                id:data.id,

                name:data.name,

            })
        }

    });
</script>